<template>

      <div class="table">
      <el-form :model="dataForm">
       
      
      <div class="table_title td_color">借款人信息</div>
      <table class="table_wrap">
        <tbody>
          <tr>
            <td class="table_td td_color">
                姓名
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.realName"/> 
            </td>
            <td class="table_td td_color">
                身份证号
            </td>
            <td class="table_td">
                {{dataForm.idCardNo}}
            </td>
            <td class="table_td td_color">
                  民族
            </td>
            <td class="table_td">
              <DicSelect dictType = "民族" :dictValue="dataForm.national" v-on:dictValue="dataForm.national = $event"/>
            </td>
            <td class="table_td td_color">
                 婚姻情况  
            </td>
            <td class="table_td">
              <DicSelect dictType = "婚姻情况" :dictValue="dataForm.marriageStatus" v-on:dictValue="dataForm.marriageStatus = $event"/>
            </td>
            <td class="table_td td_color">
                 工作单位
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.workCompany"/> 
            </td>
            <td class="table_td td_color">
                岗位/职务
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.position"/> 
            </td>
          </tr>
          <!--第二行-->
          <tr>
            <td class="table_td td_color">
                性别
            </td>
            <td class="table_td">
                {{dataForm.sexName}}
            </td>
            <td class="table_td td_color">
                年龄
            </td>
            <td class="table_td">
                {{dataForm.age}}
            </td>
            <td class="table_td td_color">
                联系方式
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.mobile"/> 
            </td>
            <td class="table_td td_color">
                 现居住地  
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.liveAddress"/> 
            </td>
            <td class="table_td td_color">
                 户籍所在地
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.householdAddress"/> 
            </td>
            <td class="table_td td_color">
                电子邮箱
            </td>
            <td class="table_td">
            <el-input  v-model="dataForm.email"/> 
            </td>
          </tr>
          <!--第三行-->
          <tr>
            <td class="table_td td_color">
                家庭人数
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="dataForm.famliyNum"/> 
            </td>
            <td class="table_td td_color">
                银行卡号码
            </td>
            <td colspan="3" class="table_td">
            <el-input  v-model="dataForm.bankCard"/> 
            </td>
            <td class="table_td ">
                
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                   
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                 
            </td>
            <td class="table_td">

            </td>
          </tr>
          <!--第四行-->
          <tr v-for="item in dataForm.clientFamliys">
            <td colspan="2" class="table_td td_color">
                关系
            </td>
            <td colspan="2" class="table_td">
            <DicSelect dictType = "与借款人关系" :dictValue="item.relation" v-on:dictValue="item.relation = $event"/> 
            </td>
            <td colspan="2" class="table_td td_color">
                姓名
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.realName"/> 
            </td>
            <td colspan="2" class="table_td td_color">
                联系电话
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.mobile"/> 
            </td>
            
          </tr>

        </tbody>
      </table>

  <!--第二个表格  共款人信息-->
        <div  v-for="(item,index) in ownerList">
          <div class="table_title td_color" style="margin-top:30px;">共借人信息（{{index+1}}）</div>
         <table class="table_wrap" >
        <tbody>
          <tr>
            <td class="table_td td_color">
                姓名
            </td>
            <td class="table_td">
            <el-input  v-model="item.realName"/> 
            </td>
            <td class="table_td td_color">
                身份证号
            </td>
            <td class="table_td">
                {{item.idCardNo}}
            </td>
            <td class="table_td td_color">
                  民族
            </td>
            <td class="table_td">
            <DicSelect dictType = "民族" :dictValue="item.national" v-on:dictValue="item.national = $event"/> 
            </td>
            <td class="table_td td_color">
                 婚姻情况  
            </td>
            <td class="table_td">
            <DicSelect dictType = "婚姻情况" :dictValue="item.marriageStatus" v-on:dictValue="item.marriageStatus = $event"/> 
            </td>
            <td class="table_td td_color">
                 性别  
            </td>
            <td class="table_td">
                {{item.sexName}}
            </td>
            <td class="table_td td_color">
                 年龄  
            </td>
            <td class="table_td">
                {{item.age}}
            </td>
          </tr>
          <tr>
            <td class="table_td td_color">
                联系方式
            </td>
            <td class="table_td">
            <el-input  v-model="item.mobile"/> 
            </td>
            <td class="table_td td_color">
                现居住地址
            </td>
            <td class="table_td">
            <el-input  v-model="item.liveAddress"/> 
            </td>
            <td class="table_td td_color">
                  户籍所在地
            </td>
            <td class="table_td">
            <el-input  v-model="item.householdAddress"/> 
            </td>
            <td class="table_td td_color">
                 电子邮箱  
            </td>
            <td class="table_td">
            <el-input  v-model="item.email"/> 
            </td>
            <td class="table_td td_color">
                 家庭人数  
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="item.famliyNum"/> 
            </td>
            <td class="table_td td_color">
                   
            </td>
            <td class="table_td">
            </td>
          </tr>
          <tr>
            <td class="table_td td_color">
                银行卡号码
            </td>
            <td colspan="2" class="table_td">
            <el-input  v-model="item.bankCard"/> 
            </td>
            <td class="table_td">
            </td>
            <td class="table_td ">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
            <td class="table_td">
            </td>
          </tr>

        </tbody>
      </table>
      </div>

  <!--第二个表格-->
          <div class="table_title td_color" style="margin-top:30px;">申请借款信息栏</div>
         <table class="table_wrap" >
        <tbody>
          <tr>
            <td class="table_td td_color">
                申请金额
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="projectInfo.applyAmount"><template slot="append">万</template></el-input> 
            </td>
            <td class="table_td td_color">
                抵押类型
            </td>
            <td class="table_td">
            <DicSelect dictType = "抵押类型" :dictValue="projectInfo.pledgeType" v-on:dictValue="projectInfo.pledgeType = $event"/> 
            </td>
            <td class="table_td td_color">
                  申请期限
            </td>
            <td class="table_td">
            <DicSelect dictType = "申请期限" :dictValue="projectInfo.applyTerm" v-on:dictValue="projectInfo.applyTerm = $event"/>
            </td>
            <td class="table_td td_color">
                 还款方式  
            </td>
            <td class="table_td">
            <DicSelect dictType = "还款方式" :dictValue="projectInfo.repayMethod" v-on:dictValue="projectInfo.repayMethod = $event"/> 
            </td>
            <td class="table_td td_color">
                 资方  
            </td>
            <td class="table_td">
            <!-- <DicSelect dictType = "资方" :dictValue="projectInfo.capitalSource" v-on:dictValue="projectInfo.capitalSource = $event"/>  -->
             <el-select v-model="projectInfo.capitalSource" clearable placeholder="请选择" style="min-width:100%;">
              <el-option
                v-for="item in chooseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
              </el-select>
            </td>
            <td class="table_td td_color">
                借款次数
            </td>
            <td class="table_td">
            <el-input type="number"  v-model="projectInfo.loanNumber"><template slot="append">次</template></el-input> 
            </td>

          </tr>
          <tr>
            <td class="table_td td_color">
                 渠道名称  
            </td>
            <td colspan="3" class="table_td">
             <el-select v-model="projectInfo.channelId" clearable placeholder="请选择" style="min-width:100%;">
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.channelName"
              :value="item.id"/>
            </el-select>
            </td>
            <td class="table_td td_color">
                客户经理
            </td>
            <td class="table_td">
                {{projectInfo.creatorName}} 
            </td>
            <td class="table_td ">
                   
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                   
            </td>
            <td class="table_td">

            </td>
            <td class="table_td ">
                 
            </td>
            <td class="table_td">

            </td>
          </tr>

        </tbody>
      </table>

      </el-form>
     
           <!--v-if="operationLook === undefined"-->
       <div style="width:400px;margin-top:5%;margin-left:40%;">
              <!-- <el-button  type="primary" @click="restForm" style="width:150px;height:40px;">清空</el-button> -->
              <el-button v-if="operationLook === undefined && projectStatus === 18" type="warning" @click="updateData" style="width:150px;height:40px;">保存</el-button>
            <el-button v-permission="'system:project-info:print'" type="primary" @click="exportData" style="width:150px;height:40px;">打印</el-button>
          </div>
      </div>
    </div>

</template>

<script>
import { findByProjectId,findListByProjectId,updateBorrower,batchUpdateOwnerBorrower,exportInfo} from '@/api/borrower'
import { findProjectBytId,createProjectInfoDraft } from '@/api/project'
import { chooseChannel } from '@/api/channel'
import {quertChoose} from "@/api/dashboard"
import DicSelect from '@/components/select'
  export default {
    components: { DicSelect },
    props:{
      projectId: undefined,
      operationLook: undefined,
      projectStatus: undefined
    },
    data () {
      return {
         headData: "",
         dataForm:{},
         projectInfo:{},
         ownerList:[],
         channelList: [],
        chooseList: [],
      }
    },
    created(){
      this.findByProjectId()
      this.findListByProjectId()
      this.findProjectBytId()
      this.getChannelList()
      this.getChoose()
    },
    methods: {
       findByProjectId() {
      findByProjectId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.dataForm = response.data
          }
        })
        .catch(() => {
          this.dataForm = undefined
        })
    },
       findProjectBytId() {
      findProjectBytId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.projectInfo = response.data
          }
        })
        .catch(() => {
          this.projectInfo = undefined
        })
    },
       findListByProjectId() {
      findListByProjectId({projectId:this.projectId})
        .then(response => {
          if(response.data != undefined ) {
            this.ownerList = response.data
          }
        })
        .catch(() => {
          this.ownerList = []
        })
    },
    getChoose() {
      quertChoose()
        .then((res) => {
          this.chooseList = res.data
        })
        .catch(() => {
           this.chooseList = []
        })
    },
    getChannelList() {
      chooseChannel()
        .then(response => {
          this.channelList = response.data
        })
        .catch(() => {
          this.channelList = []
        })
    },
    updateData(){
      this.updateBorrower()
      this.batchUpdateOwnerBorrower()
      this.updateProject()
    },
    updateBorrower(){
          updateBorrower(this.dataForm)
           .then(response => {
            this.findByProjectId()
            if( this.ownerList.length == 0) {
               this.$notify.success({
                title: '成功',
                message: '编辑成功'
              })
            }
            console.log("借款人编辑成功")
             })
              .catch(response => {
                })         
    },
    batchUpdateOwnerBorrower(){
        if( this.ownerList.length == 0) {
          return false
        }
        batchUpdateOwnerBorrower(this.ownerList)
            .then(response => {
              this.findListByProjectId()
              this.$notify.success({
                title: '成功',
                message: '编辑成功'
              })
            })
            .catch(response => {
            })
    },
    updateProject(){
        createProjectInfoDraft(this.projectInfo)
            .then(response => {
              this.findProjectBytId()
              console.log("项目信息编辑成功")
            })
            .catch(response => {
              console.log(response)
            })
    },
      exportData() {

        exportInfo({projectId: this.projectId})
            .then((res) => {
              // this.$notify.success({
              //   title: '成功',
              //   message: '导出成功'
              // })
              const content = res.data
              window.open(content.fileUrl)
            })
            .catch(response => {
              console.log(response)
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
      },
    }
  }
</script>

<style>

.table .el-input__inner{
  height:52px;
  line-height: 55px;
  border:0px solid;
}

.table .el-input-group__append{
  border:0px solid;
}

.table {
  background-color: #fff;
  width: 100%;
}
.table_title{
  background-color: #fff;
  border-top: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  border-left: 1px solid #c7c7c7;
  width: 100%;
  background-color: #fff;
  text-align: center;
  line-height: 50px;
}
.table_wrap{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;

}

.table_td {
  text-align: center;
  line-height: 50px;
  min-width: 90px;
  border: 1px solid #c7c7c7;
}
.td_color{
  background-color: #f4f4f4;
}

</style>